﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title>HTML 5 Canvas websocket client</title>
    <style type="text/css">
        body {
            /*background-color: #000000;
            color: #ffffff;*/
            font-size: 12px;
        }

        #sendForm {
            display: block;
        }

        ul {
            list-style: decimal;
        }
    </style>
    <script type="text/javascript" src="jquery-2.1.1.js"></script>
    <script type="text/javascript">

        //webSocket对像
        var webSocket = { n: 1, maxloglength: 1000, logs: [] };



        //开始
        webSocket.start = function () {
            webSocket.n++;
            var inc = document.getElementById('incomming');
            var nx = document.getElementById('nx');
            var wsImpl = window.WebSocket || window.MozWebSocket;
            var form = document.getElementById('sendForm');
            var input = document.getElementById('sendText');
            var ipv = document.getElementById('ip');
            var portv = document.getElementById('port');
            //服务器地址
            var serverStr = ipv.value + ':' + portv.value;

            inc.innerHTML = "";
            inc.innerHTML += "正在连接到服务器" + serverStr + "<br/>";



            // create a new websocket and connect

            window.ws = new wsImpl('ws://' + serverStr + '/');

            // when data is comming from the server, this metod is called
            ws.onmessage = function (evt) {
                var logdiv = $('#logs');
                if (webSocket.logs.length > webSocket.maxloglength) {
                    //删除原素自身
                    webSocket.logs[0].remove();
                    //就是删除下标为1的数组元素。
                    webSocket.logs.splice(0, 1);
                }
                var obj = $("<li>" + evt.data + "</li>");
                webSocket.logs.push(obj);
                logdiv.prepend(obj);
            };

            // when the connection is established, this method is called
            ws.onopen = function () {
                inc.innerHTML = '服务器 ' + serverStr + ' 连接成功<br/>';
            };

            // when the connection is closed, this method is called
            ws.onclose = function () {
                inc.innerHTML += '.. connection closed<br/>';
                inc.innerHTML += "第" + webSocket.n + '次2秒后重新开始联接...<br/>';
                nx.innerHTML = webSocket.n;
                window.ws.close();
                delete wsImpl;
                delete window.ws;
                setTimeout(webSocket.start, 2000);
            }

            form.addEventListener('submit', function (e) {
                e.preventDefault();
                var val = input.value;
                ws.send(val);
                input.value = "";
            });

        }
        window.onload = webSocket.start;
    </script>





</head>
<body>
    <fieldset>
        <legend>HTML摄像头</legend>
        <div>
            <video id="video" autoplay="" width="320px" height="240px"></video>
            <canvas id="canvas1" width="320" height="240"></canvas>
            <hr />
            <input id="Button2" type="button" value="拍照" onclick="scamera()" />
            <input id="Button2" type="button" value="自动拍照上传" onclick="canAuto = true;Autoscamera()" />采样间隔<input id="invcapuct" type="text" value="30" />
            <input id="textB64" type="text" value="base64压缩的字符串" />
            <input id="Button1" type="button" value="提取base64编码" onclick="showImgCode()" />
            <input id="Button3" type="button" value="Get到服务器" onclick="uploadPhoto()" />
        </div>
    </fieldset>
    <hr />
    远程地址: <input id="ip" value="localhost" />远程端口:<input id="port" value="4618" /> <button onclick="webSocket.start();">手动重联</button>
    <form id="sendForm">
        <input id="sendText" placeholder="Text to send" /><button onclick="window.ws.send( Math.random());">发送数据</button>
    </form>

    <pre id="incomming"></pre>
    <ul id="logs"></ul>
    <pre id="nx"></pre>

    <script type="text/javascript">
        ////代码作者 singlex@foxmail.com
        var video = document.getElementById("video");
        navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
        if (navigator.getUserMedia) {
            if (navigator.webkitURL) {
                navigator.getUserMedia({ video: true }, function (stream) {
                    video.src = window.webkitURL.createObjectURL(stream);
                }, function (error) { alert(error); });
            }
            else {
                navigator.getUserMedia({ video: true }, function (stream) {
                    video.src = window.webkitURL.createObjectURL(stream);
                }, function (error) { alert(error); });
            }
        }
        else {
            alert("navigator.getUserMedia不支持请换用webwike内核浏览器");
        }
        function scamera() {
            var videoElement = document.getElementById('video');
            var canvasObj = document.getElementById('canvas1');
            var context1 = canvasObj.getContext('2d');
            context1.fillStyle = "#ffffff";
            context1.fillRect(0, 0, 320, 240);
            context1.drawImage(videoElement, 0, 0, 320, 240);
        }

        function showImgCode() {
            if (document.getElementById("textB64").value == "base64压缩的字符串") {
                scamera();
            }
            var canvasObj = document.getElementById('canvas1');
            var imgData = canvasObj.toDataURL();
            var b64 = imgData.substr(22);
            document.getElementById("textB64").value = b64;
        }

        function uploadPhoto()//上传拍照的图片
        {
            showImgCode();

            var base64Data = document.getElementById('textB64').value;//.value.replace(/\+/g, "%2B"); //对参数中的+号编码，防止丢失
            if (oldstr != base64Data) {
                oldstr = base64Data;
                //这里用Websocket发送
                window.ws.send("^img=" + base64Data + "^");
            }
        }
        var oldstr;
        var canAuto = true;
        function Autoscamera() {

            var invmum = parseInt($('#invcapuct').val());
            //1秒上传N次
           setTimeout(autoCapute, invmum);
        }
        //自动拍照上传
        function autoCapute() {

            try {
                //拍照
                scamera();
                //提取
                showImgCode();
                //上传
                uploadPhoto();
                if (canAuto) {

                    Autoscamera();
                }
            }
            catch (e) { alert(e) }
        }


    </script>
</body>









</html>
